<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;border: 0;margin: 0;outline: 0;box-sizing: border-box;}
			.box{height: 500px;border: 1px solid #ddd;}
			.tab-nav{height: 50px;line-height: 50px;}
			.tab-nav span{height: 100%;width: 33.33%;float: left;text-align: center;cursor: pointer;}
			.tab-nav span.on{border-bottom: 1px solid #f60;}
			.tab-nav .article{border-left: 1px solid #ddd;border-right: 1px solid #ddd;}
			.content{position:relative;height: 448px;border-top: 1px solid #ddd;}
			.content div{height: 100%;line-height:448px;text-align:center;display: none;font-size: 60px;color: #ccc;}
			.content div.on{display: block;}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="tab-nav" id="tab-nav">
				<span class="home on" id="home">首页</span> <!-- home on -->
				<span class="article" id="article">文章</span>
				<span class="aboutme" id="aboutme">关于我</span>
			</div>
			<div class="content">
				<div class="home on">home</div>
				<div class="article">article</div>
				<div class="aboutme">aboutme</div>
			</div>
		</div>
		<script type="text/javascript" src="./jquery.min.js"></script>
		<script type="text/javascript">
			$('#tab-nav').on('click','span',function(){
				$(this).addClass('on').siblings('span').removeClass('on').closest('.box').find('.content').find('.'+$(this).attr('id')).show().siblings('div').hide();
			})
			/*
			document.getElementById('tab-nav').addEventListener('click',function(ev){
				var tabnavDiv = ev.target.parentElement.children; // tab-nav 里面的所有 div元素
				for(var i = 0;i < tabnavDiv.length;i++){
					tabnavDiv[i].classList.remove('on');
				}
				ev.target.classList.add('on');
				console.dir(ev);
				// 思路一：当前点击的显示，不是当前点击的元素隐藏
				var contentDiv = document.querySelectorAll('.content div'); // 所有content里面的div元素
				for(var i = 0;i < contentDiv.length;i++){
					contentDiv[i].style.display = 'none';
				}
				document.querySelector('.content .' + ev.target.id).style.display = 'block';
				// 思路二：都隐藏，然后，让当前点击的显示。
			})
			*/
		</script>
	</body>
</html>